<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head" v-if="mode == 3">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left">
					<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
				</view>
			</view>
			<view class="kaoshi-logo">
				<image :src="static_media.img01" class="kaoshi-logo-img"></image>
			</view>
			<view class="kaoshi-login">
				<view class="kaoshi-login-content">
					<view class="kaoshi-login-title">
						<view :class="{ 'kaoshi-login-title-active': form_type == 0, 'kaoshi-login-title-other': form_type != 0 }"
							@tap="form_type = 0">登录
						</view>
						<view :class="{ 'kaoshi-login-title-active': form_type == 1, 'kaoshi-login-title-other': form_type != 1 }"
							@tap="form_type = 1">注册
						</view>
					</view>
					<view v-if="form_type == 0" class="kaoshi-input-group">
						<view class="kaoshi-input-row border kaoshi-login-flex">
							<text class="iconfont icon-shouji"></text>
							<m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号"
								style="flex: 1;"></m-input>
						</view>
						<view class="kaoshi-input-row kaoshi-login-flex ">
							<text class="iconfont icon-suo"></text>
							<m-input type="password" displayable v-model="password" placeholder="请输入密码" style="flex: 1;"></m-input>
						</view>
					</view>
					<view v-if="form_type == 1" class="kaoshi-input-group">
						<view class="kaoshi-input-row border kaoshi-login-flex">
							<text class="iconfont icon-shouji"></text>
							<m-input type="text" clearable v-model="account" placeholder="请输入用户名" style="flex: 1;">
							</m-input>
						</view>
						<view class="kaoshi-input-row kaoshi-login-flex">
							<text class="iconfont icon-suo"></text>
							<m-input type="password" displayable v-model="password" placeholder="请输入密码" style="flex: 1;"></m-input>
						</view>
					</view>
					<view class="kaoshi-login-forget">
					</view>
					<view style="font-size: 14px;color: #888;margin: 40px auto 17px;text-align: center;">暂不登录，<text
							style="color: #3b7bf9;" @tap="toMain">随便逛逛</text></view>
					<view class="kaoshi-login-button" v-if="form_type == 0">
						<button type="primary" class="kaoshi-primary" @tap="bindLogin">登录</button>
					</view>
					<view class="kaoshi-login-button" v-if="form_type == 1">
						<button type="primary" class="kaoshi-primary" @tap="creaet_user">注册</button>
					</view>
				</view>
			</view>
		</view>

		<view v-else>
			<view class="layout">
				<view class="kaoshi-logo" style="margin-top: 30px;">
					<image :src="static_media.img01" class="kaoshi-logo-img"></image>
				</view>
				<button style="margin-top: 80px;" v-if="canIUseGetUserProfile" @tap="getUserProfile" class="ydy-button">
					微信登录</button>
				<button v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="passive_authorize" class="ydy-button">微信登录
				</button>
				<view @tap="cancel" style="font-size:15px;color: #8a8a8a;margin-top:9px;">取消登录</view>
				<view class="ydy-b">您需要授权才能正常使用此功能，我们承诺您的信息只应用在本平台，不做其他无关使用。</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from "vuex";
import mInput from "@/components/m-input.vue";

export default {
	components: {
		mInput,
	},
	data() {
		return {
			mode: 1, //程序编译版本：mode：3为账号密码登录
			Shouquan: false,
			showmodal: false,
			account: "",
			password: "",
			form_type: 0, // 0 登录；1 注册

			rawData: {},
			canIUseGetUserProfile: false, //小程序更改授权方式  2021年5月17日   不再使用get-authorize组件
			ispk: false,//是否pk
		};
	},
	computed: {
		...mapState(["userinfo", "forcedLogin", "subject"]),
		static_media() {
			return {
				img01: this.$myConfig.localMedia + '/static/img/login.png'
			}
		}
	},
	onLoad(opts) {
		if (opts.ispk == 1) {
			//是pk没有登录的情况，登录后继续
			this.ispk = true
		}
		this.mode = this.$myConfig.mode
		if (opts && opts.form_type) {
			this.form_type = opts.form_type
		}
		if (this.userinfo && this.userinfo.token) {
			this.toMain()
		}
		//小程序更改授权方式  2021年5月17日   不再使用get-authorize组件
		if (wx.getUserProfile) {
			this.canIUseGetUserProfile = true
		}
	},
	onShow() { },
	methods: {
		async creaet_user() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			if (this.account.length < 2) {
				uni.showToast({
					icon: "none",
					title: "账号最短为 2 个字符"
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: "none",
					title: "密码最短为 6 个字符"
				});
				return;
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.register,
				data: {
					username: this.account,
					password: this.password
				}
			});

			if (res.code === 1) {
				this.$myUtils.$prompt.showToast({
					icon: "none",
					title: "注册成功"
				});
				const data = {
					account: this.account,
					password: this.password
				};
				const valid = await this.$myUserLogin.login(data);
				if (valid) {
					//如果已经选择了科目，直接进入首页，否者进入选择科目页面
					this.toMain();
				}
			}
		},
		async bindLogin() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			if (this.account.length < 2) {
				uni.showToast({
					icon: "none",
					title: "账号最短为 2 个字符"
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: "none",
					title: "密码最短为 6 个字符"
				});
				return;
			}
			const data = {
				account: this.account,
				password: this.password
			};
			const valid = await this.$myUserLogin.login(data);
			if (valid) {
				//如果已经选择了科目，直接进入首页，否者进入选择科目页面
				this.toMain();
			}
		},

		//小程序更改授权方式  2021年5月17日  不再使用get-authorize组件
		getUserProfile(e) {
			let that = this,
				code = '';
			uni.login({
				provider: 'weixin',
				success: function (res) {
					console.log('%c [ uni.loginres ]-205', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					if (res.errMsg == "login:ok") {
						code = res.code
					}
				}
			});
			// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
			console.log('%c [ "执行" ]-219', 'font-size:13px; background:pink; color:#bf2c9f;', "执行")

			wx.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					console.log('%c [ uni.getUserProfileres ]-217', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					if (res.errMsg == "getUserProfile:ok") {
						this.bindGetUserInfo({
							code,
							...res
						});
					}
				}
			})
		},
		cancel() {
			uni.navigateBack({
				delta: 1
			})
		},
		/**
		 * 被动授权
		 * */
		passive_authorize(params) {
			uni.showLoading();
			if (params.detail) {
				if (params.detail.errMsg == 'getUserInfo:ok') {
					this.getLoginCode();
				}
			}
		},
		/**
		 * 获取微信登录code
		 * */
		getLoginCode() {
			let that = this;
			console.log('根据获取到的用户信息处理业务代码');
			//接下来写业务代码
			uni.login({
				provider: 'weixin',
				success: function (res) {
					// console.log(res)
					if (res.errMsg == "login:ok") {
						that.getUserInfo(res);
					}
				}
			});
		},
		/**
		 * 获取到用户信息
		 * */
		getUserInfo(loginCode) {
			let that = this;
			// 获取用户信息
			uni.getUserInfo({
				provider: 'weixin',
				success(res) {
					console.log('获取用户信息成功');
					uni.hideLoading();

					//此处得到userInfo
					if (res.errMsg == 'getUserInfo:ok') {
						//接下来写业务代码
						that.bindGetUserInfo({
							...loginCode,
							...res
						});
					}

				},
				fail() {
					console.log('获取用户信息失败');
				}
			});
		},
		/**
		 * 添加用户到后台数据库中
		 * */
		async bindGetUserInfo(params) {
			console.log('%c [ params ]-292', 'font-size:13px; background:pink; color:#bf2c9f;', params)

			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.authMini,
				data: {
					code: params.code,
					rawData: params.rawData
				},
				permission: '',
				need_login: false,
			});


			if (res.code == 1) {
				uni.hideLoading();

				// 注册用户成功
				// 保存用户信息
				let userinfo = {
					'user_id': res.data.user_id,
					'group_id': res.data.group_id,
					avatarUrl: params.userInfo.avatarUrl,
					city: params.userInfo.city,
					country: params.userInfo.country,
					gender: params.userInfo.gender,
					language: params.userInfo.language,
					nickName: params.userInfo.nickName,
					province: params.userInfo.province,
					expTime: 0,
					token: res.data.token,
				};

				this.$store.commit('setUserInfo', {
					userinfo: {
						...userinfo,
						token: res.data.token
					}
				});
				uni.showToast({
					icon: 'success',
					title: '登录成功'
				})

				//显示加载中
				uni.showLoading({
					title: '登录中'
				});

				setTimeout(() => {
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						mask: true
					})
				}, 1000);
				if (this.ispk == true) {
					//返回上一页
					uni.navigateBack({
						delta: 1
					})

				} else {
					//正常情况
					//判断是否名称为 微信用户
					this.checkIsNew()

				}

			} else {
				this.canIUse = wx.canIUse('button.open-type.getUserInfo');
			}
		},
		// async toMain() {
		//     // 判断是否选择了科目
		//     if (this.subject && this.subject.id && this.subject.id !== 0) {
		//         // 进入首页
		// 		await this.$myUserLogin.getSubvip(this.subject.id)
		//         this.$myUtils.$router.switchTab({
		//             url: "/pages/index/index"
		//         });
		//     } else {
		//         // 进入选择科目
		//         this.$myUtils.$router.navigateTo({
		//             url: "/pages/auth/choiceSubject/index"
		//         });
		//     }
		// },
		checkIsNew() {
			//查询是否新用户
			// 用token查询 用户的名称是 微信用户 ==> 强制修改资料 ，
			// 用户的名称不是是 微信用户  ==>  index
			this.$myHttp.get({
				url: this.$myHttp.urlMap.getUserInfo,
				needLogin: true,
				success: res => {
					console.log('%c [ res ]-392', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.data.nickname)
					if (res.data.data.nickname == '微信用户') {
						// 新的用户 强制跳转修改资料页面
						uni.reLaunch({ url: '/pages/my/setting/index?isnew=true' })
					} else {
						// 进入首页
						this.$myUtils.$router.switchTab({
							url: "/pages/my/index"
						});
					}

				}
			})


		},
		toMain() {
			// 判断是否选择了科目
			if (this.subject && this.subject.id && this.subject.id !== 0) {
				// 进入首页
				this.$myUtils.$router.switchTab({
					url: "/pages/index/index"
				});
			} else {
				// 进入选择科目
				this.$myUtils.$router.navigateTo({
					url: "/pages/auth/choiceSubject/index"
				});
			}
		},
	}
};
</script>

<style>
page {
	background: #f9fafe;
}

.kaoshi-head {
	border-bottom: none;
	background: #f9fafe
}

.kaoshi-logo {
	text-align: center;
}

.kaoshi-logo-img {
	width: 156px;
	height: 156px;
	margin-top: 25px;
}

.kaoshi-login {
	width: 90%;
	margin: 0 auto;
	background: #f9fafe;
}

.kaoshi-login-content {
	margin-top: 22px;
	margin-right: 22px;
	margin-left: 22px;
}

.kaoshi-login-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	width: 44%;
	margin: 0 auto 18px;
	line-height: 42px;
}

.kaoshi-login-title-active {
	border-bottom: solid 2px #3c7bfc;
	width: 30%;
	text-align: center;
	color: #000;
	font-weight: bold;
}

.kaoshi-login-title-other {
	border-bottom: solid 2px transparent;
	text-align: center;
	width: 30%;
	color: #888;
}

.kaoshi-login-flex {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.kaoshi-login-button {
	margin-top: 15px;
}

.kaoshi-login-forget {
	color: #000;
	font-size: 14px;
	margin: 12px 0;
}

.kaoshi-input-group {
	margin-top: 4px;
}

.kaoshi-input-group::before {
	background-color: #fff;
}

.kaoshi-input-row {
	background-color: #fff;
	margin-top: 15px;
	padding: 0 15px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.kaoshi-input-group::after,
.kaoshi-input-row.border::after {
	background-color: #f6f7f9 !important;
}


.kaoshi-primary {
	width: 175px;
	background: #3c7bfc !important;
	color: #fff !important;
	border-radius: 8px;
	font-size: 14px;
	box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
	line-height: 35px;
}

.kaoshi-yanzheng {
	width: 81px;
	height: 30px;
	font-size: 12px;
	line-height: 30px;
	color: #fff;
	background: #3c7bfc;
	text-align: center;
	border-radius: 16px 16px 16px 0;
}

.kaoshi-password {
	text-align: right;
	color: #7d7d7d;
}

.border {
	border-bottom: solid 1px #fbfbfb;
}

.kaoshi-xieyi {
	font-weight: bold;
	text-decoration: underline;
	color: #3c7bfc;
}

.kaoshi-xieyi-flex {
	font-size: 13px;
	display: flex;
	align-items: center;
	color: #cecece;
	margin-top: 5px
}

.kaoshi-xieyi-check {
	transform: scale(0.7);
	color: #4c8cf8
}

.kaoshi-xieyi-text {
	color: #000;
	display: flex;
	align-items: center;
}

.layout {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.ydy {
	width: 90%;
	height: 325px;
	margin: 0 auto;
}

.ydy-button {
	background: #3c7bfc;
	width: 82%;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	padding: 3px;
	color: #fff;
	border-radius: 5px;
	letter-spacing: 2px;
}

.ydy-b {
	font-size: 13px;
	width: 83%;
	color: #888888;
	text-align: center;
	margin-top: 17px;
	line-height: 19px;
}

.icon-suo,
.icon-shouji {
	color: #0f74c6;
	margin-right: 5px;
}
</style>
